<template>
	<view class="container">

		<view class="list-content">
			<view class="" v-for="(item,index) in cellList" :key="index">
				<view class="list-items" v-if="item.label=='avatar'" @click="operateUserInfo(item)">
					<text>{{item.title}}</text>
					<!-- #ifdef APP-PLUS -->
					<img :src="userInfo.avatar" alt="" class="head-img">
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN || H5 -->
					<image :src="userInfo.avatar" mode="" class="head-img"></image>
					<!-- #endif -->
				</view>

				<view class="list-items" v-else @click="operateUserInfo(item)">
					<text>{{item.title}}</text>
					<text>{{userInfo[item.label]}}</text>
				</view>
				
			</view>
            
			<view style="height: 20rpx;"></view>
			
            
            
			<u-cell-group v-if="cellList2.length > 0" class="ugroup"
						  :customStyle="{'margin-top': '30rpx', 'background': '#fff','fontSize': '28rpx','fontFamily': 'Source Han Sans CN','fontWeight': '400','color': '#333333'}">
				<view class="cell-container" v-for="(item,index) in cellList2" :key="index">
					<u-cell :title="item.title" :isLink="item.isLink" :border="false" :key="index"
							@click="goDetail(item)">
						<view class="cell-slot" slot="value">
							<view v-if="item.value">
								{{item.value}}
							</view>
						</view>
					</u-cell>
					<view class="line-container">
						<view class="line"></view>
					</view>
				</view>
			</u-cell-group>
		
		
			
			
			
			
				
				<view class="footer" v-show="avatar_chose">
					<view class="avatar-chose">
						<view class="">
							推荐使用头像
						</view>
						<view class="avatar-list">
							<view class="avatar-list list-item" v-for="(item,index) in avatarList" :key="index"
								  @click="chosedAvatar=item" :style="{'background':item==chosedAvatar?'#EC872E':'gray'}">
								<u-avatar size="68rpx" :src="imgUrl + item">
								</u-avatar>
							</view>
						</view>
						<view class="avatar-sure" @click="sureChose">
							确定
						</view>
					</view>
				</view>
				

			
			

			<view class="dialog" v-if="showVisible">
				<!-- #ifdef APP-PLUS || H5 || MP-WEIXIN -->

				<view class="containers">
					<view class="main">
						
						<view class="body main-center-flex">
							<view class="close" @click="showVisible=false">x</view>
							<view class="content">
								<view class="title main-center-flex">
									{{title}}
								</view>
								<view class="content-detail">
									<u--input v-model="inputModel" border="none" :placeholder="$t('please_input')" fontSize="28rpx"
											  color="#b0b0b0" inputAlign="center">
									</u--input>
								</view>
								<view class="edit-icon">
									<u-icon name="edit-pen"></u-icon>
								</view>
								<view class="button main-center-flex">
									<view class="button_1 main-center-flex" @click="confirm">
										{{$t("sure")}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		
	    <view class="caiji_box" v-if="showCaijian" style="height: 100vh;">
	        <bt-cropper ref="cropper" :imageSrc="imageSrc" :ratio="caijiRatio" :quality="quality" :dWidth='240'></bt-cropper>
	        <view @click="crop" class="sure_caiji"><view class="btn">{{$t("Confirm cutting")}}</view></view>
            <view @click="showCaijian = !showCaijian" class="cancle_caiji"><view class="btn">{{$t("Cancel cropping")}}</view></view>
	    </view>
        
         <u-datetime-picker
                        :minDate="minDate"
                        :show="showDate"
                        v-model="defaultTime"
                        mode="date"
                        @confirm="setBirthday"
                        @cancel="showDate = !showDate"
                        confirmText="Yes"
                        cancelText="No"
                ></u-datetime-picker>
                
		<view style="height: 250rpx;"></view>
				
		
	</view>
</template>

<script>
    import baseUrl from '@/utils/siteInfo.js';
  
    import {
        get_user_info,
        set_user_info,
        getAvatar
    } from '@/api/my.js';
    export default {
        components: {
           
        },
        data() {
            return {
				imgUrl:baseUrl.imgroot,
				apiUrl:baseUrl.apiroot,
                currentType: '',
                isInput: false,
                content: '',
                inputModel: '',
                title: '',
                showVisible: false,
                chosedAvatar: null,
                avatarList: [],
                avatar_chose: false,
                showDate:false,
                quality:0.6,
                defaultTime: Number(new Date()),
                minDate:-2209017943000,//1900
                userInfo: {},
                single:'',
                cellList: [{
                    title: this.$t('face'),
                    isLink: true,
                    label: 'avatar',
                },
                    {
                        title: "昵称",
                        isLink: false,
                        label: 'nickname',
                    },
                    {
                        title: this.$t('mobile'),
                        isLink: false,
                        label: 'mobile',
                    }
                ],
                cellList2: [
					/* {
						title: '隐私协议',
						isLink: true,
						adress: '/pages/my/xieyi/yinsi'
					},{
						title: '用户协议',
						isLink: true,
						adress: '/pages/my/xieyi/user'
					} */
                ],
                caijiRatio:1,
                showCaijian:false,
                imageSrc:'',
            }
        },
        onShow() {
            this.getUserInfo()
        },
        methods: {
            maskClick(e){
                console.log('maskClick事件:', e);
            },
            sureChose() {
                set_user_info({
                    avatar: this.chosedAvatar,
                    nickname: this.userInfo.nickname,
					nickname_en:this.userInfo.nickname_en,
                    mobile: this.userInfo.mobile
                }).then(res => {
                    if (res.code == 0) {
                        this.getUserInfo()
                    }
                    this.avatar_chose = false
                    uni.$u.toast(res.msg)
                }).catch(err => {
                    uni.$u.toast(err.msg)
                })
            },

            goDetail(item) {
                if (item.adress) {
                    uni.navigateTo({
                        url: item.adress
                    })
                }
            },
            loginOut() {
				uni.showModal({
				    title: this.$t('kuan.tishi'),
				    content: this.$t('kuan.sure'),
				    success: function (res) {
				        if (res.confirm) {
				            uni.setStorageSync('_USER_ACCESS_TOKEN', '')
				            uni.switchTab({
				                url: '/pages/index/index'
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				            // 用户点击了取消，执行相应的逻辑
				        }
				    }
				});
               
            },
            getUserInfo() {
                get_user_info().then(res => {
                    if (res.code == 0) {
                        this.userInfo = res.data
                        this.chosedAvatar = res.data.avatar;
                        
                    }
                }).catch(err => {})
                getAvatar().then(res => {
                    if (res.code == 0) {
                        this.avatarList = res.data
                    }

                })
            },

            setBirthday(e){
                this.defaultTime = e.value;
                this.userInfo.birthday = this.timestampToDate(e.value);
                this.showDate = false;
            },
            timestampToDate(timestamp) {  
              // 创建一个Date对象  
              const date = new Date(timestamp);  

              const year = date.getFullYear();  
              const month = ('0' + (date.getMonth() + 1)).slice(-2); // 保证月份是两位数  
              const day = ('0' + date.getDate()).slice(-2); // 保证日期是两位数  
                
              // 拼接成年-月-日的格式  
              return `${year}-${month}-${day}`;  
            },
            changeAvatar(e) {
                console.log('1416-0', e)
            },
            getphonenumber(e) {
                console.log('1416-2', e)
            },
            changeUserInfo() {
				uni.showLoading();
                let {
                    avatar,
                    mobile,
                    nickname,
					nickname_en,
					identy,
                    birthday,
					age,
					email
                } = this.userInfo
                set_user_info({
                    avatar,
                    nickname,
					nickname_en,
                    mobile,
					identy,
					age,
					email,
                    birthday
                }).then(res => {
                    if (res.code == 0) {
                        this.getUserInfo()
                        this.avatar_chose = false
                    }
					uni.hideLoading();
                    uni.$u.toast(res.msg);
                    uni.switchTab({
                        url:"/pages/my/index"
                    })
                }).catch(err => {
					uni.hideLoading();
                    uni.$u.toast(err.msg)
                })
            },
            operateUserInfo(e) {
				return false;
                console.log(e, 'dangqian xuanz ')
				// #ifdef MP-WEIXIN
				return '';
				// #endif
                const that = this
                // #ifdef APP-PLUS || H5
                that.currentType = e.label
                if (e.label == 'nickname') {
                    that.title = e.title
                    that.inputModel = that.userInfo.nickname
                    that.showVisible = true
                }else if (e.label == 'nickname_en') {
                    that.title =  e.title
                    that.inputModel = that.userInfo.nickname_en
                    that.showVisible = true
                }else if (e.label == 'identy') {
                    that.title =  e.title
                    that.inputModel = that.userInfo.identy
                    that.showVisible = true
                }else if(e.label == 'birthday'){
                    that.showDate = true;
                }else if (e.label == 'email') {
                    that.title =  e.title
                    that.inputModel = that.userInfo.email
                    that.showVisible = true
                }else if (e.label == 'age') {
                    that.title =  e.title
                    that.inputModel = that.userInfo.age
                    that.showVisible = true
                }else if (e.label == 'avatar') {
                    // 选择图片  
                   uni.chooseImage({  
                        count: 1, // 默认9  
                        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
                        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
                        success: function (res) {  
                            // tempFilePath可以作为img标签的src属性显示图片  
                            var tempFilePaths = res.tempFilePaths;
                              that.showCaijian = true;
                              that.imageSrc = tempFilePaths[0];
                            // that.uploadAvatar(tempFilePaths[0]);  
                        }  
                    });
                } else if (e.label == 'mobile') {
                    that.title = e.title
                    that.inputModel = that.userInfo.mobile
                    that.showVisible = true
                }
                return
                // #endif
                if (e.label == "avatar") {
                    that.avatar_chose = true
                    return
                }
                if (e.label == 'nickname') {
					that.title = '修改昵称'
					this.currentType = 'nickname';
					that.inputModel = that.userInfo.nickname
					that.showVisible = true
                    /* that.$refs.modal.showModal({
                        title: '修改昵称', // e.name == 'nickname' ? '修改昵称' : '修改手机号',
                        isInput: true,
                        inputModel: that.userInfo.nickname,
                        confirm: (e) => {
                            that.userInfo.nickname = e
                            that.changeUserInfo()
                        }
                    }) */
                }
            },
             crop(){
                // 通过组件定义的ref调用cropper方法，返回一个promise对象
                this.$refs.cropper.crop().then((res)=>{
                    console.log(res);
                    // let blob = res;  
                    // let file = new File([blob], 'image.jpg', { type: blob.type });
                    // console.log(file.path);
                    this.uploadAvatar(res);
                })
              },
			uploadAvatar(filePath){
                uni.showLoading()
				var self = this;
				uni.uploadFile({  
				        url: self.apiUrl+'/common/upload', // 这里替换为你的FastAdmin上传接口地址  
				        filePath: filePath,  
				        name: 'file', // 文件对应的 key，开发者在服务端用这个 key 可以获取到文件二进制内容  
				        formData: {  
				            //'user': 'test' // 这里可以添加其他表单数据，如用户ID等  
				        },  
				        success: (uploadFileRespon) => {  
                            uni.hideLoading();
				            // 这里处理上传成功后的逻辑，如解析返回的数据等  
				            console.log(uploadFileRespon.data);
							var uploadFileRes = JSON.parse(uploadFileRespon.data);
							if(uploadFileRes.code != 0){
								uni.showToast({
									title:uploadFileRes.msg,
									icon:'none'
								})
							}else{
								 self.userInfo.avatar =uploadFileRes.data.fullurl;
                                 self.showCaijian = false;
							}
				        },  
				        fail: (err) => {  
                            uni.hideLoading();
				            // 这里处理上传失败的情况  
				            console.error(err);  
							uni.showToast({
								title:"Error",
								icon:'none'
							})
				        }  
				    });  
			},
            confirm() {
                if (this.currentType == "nickname") {
                    this.userInfo.nickname = this.inputModel
                }
				if (this.currentType == "nickname_en") {
                    this.userInfo.nickname_en = this.inputModel
                }
				 if (this.currentType == "mobile") {
				     this.userInfo.mobile = this.inputModel
				 }
				 if (this.currentType == "email") {
				     this.userInfo.email = this.inputModel
				 }
				 if (this.currentType == "age") {
				     this.userInfo.age = this.inputModel
				 }
				 if (this.currentType == "identy") {
				     this.userInfo.identy = this.inputModel
				 }
                this.showVisible = false
            },
        }
    }

</script>

<style scoped>
page{
	background-color: #f6f6f6;
}
	.container {
		width: 750rpx;
		min-height: 100vh;
		padding: 30rpx;
	}

	.cell-slot {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	::v-deep .u-cell__body {
		min-height: 105rpx !important;
	}

	.cell-container {
		position: relative;
		width: 100%;
	}

	.line-container {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 2rpx;
		padding: 0 30rpx;
	}

	.line {
		height: 100%;
		width: 100%;
		background: #F8F8F8;
	}

	.login-out {
		margin-top: 34rpx;
		width: 100%;
		height: 84rpx;
		background: #c7c7c7;
		margin-left: auto;
        margin-right: auto;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000;
        margin-bottom: 40rpx;
	}

	.choose-avatar {
		width: 220rpx;
		text-align: right;
		position: relative;
		right: 0;
	}

	.avatar-chose {
		wdith: 100%;
		padding: 20rpx;
		background: #FFFFFF;
		/* #ifdef APP-PLUS */
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;

		/* #endif */
	}

	.avatar-list {
		display: flex;
		justify-content: space-around;
		margin: 20rpx;
	}

	.avatar-sure {
		width: 680rpx;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		left: 0;
		right: 0;
		margin: 20rpx auto;
		background: #333;
		color: #fff;
	}

	.list-item {
		background: gray;
	}

	.head-img {
		width: 106rpx;
		height: 106rpx;
		border-radius: 16rpx;
	}

	.list-content {
		color: #8b8686;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.list-items {
		display: flex;
		justify-content: space-between;
		height: 128rpx;
		line-height: 128rpx;
		align-items: center;
		font-size: 28rpx;
		color: #000;
	
		border-bottom: 2rpx solid #f1f1f1;
	}

	.list-button {
		height: 66rpx;
		width: 230rpx;
		line-height: 66rpx;
		background: #fff;
	
		text-align: right;
		
	}

	.ugroup {
		background: #FFFFFF;
		margin-top: 30rpx;
	}

	.footer {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
	}

	.dialog {
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
		position: absolute;
		top: 0;
		left: 0;
	}

	.containers {
		height: 100vh;
		width: 750rpx;
		padding: 50rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.4);
	}
.tijiao{
	margin: 26rpx 0rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	font-size: 30rpx;
	background: #4b4b4b;
}
	.main {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.close {
		height: 46rpx;
		width: 46rpx;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 36rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #a5a4a4;
		border-radius: 50%;
	}

	.head {
		width: 100%;
		height: 85rpx;
	}

	.body {
		width: 100%;
		background: #ffffff;
		border: 5rpx solid #676363;
		border-radius: 0 0 20rpx 20rpx;
		padding: 20rpx;
		position: relative;
		top: -10rpx;
	}

	.content {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		border: 3rpx solid #ededed;
	}

	.title {
		width: 100%;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #333333;
		margin: 54rpx 0 29rpx 0;
		padding: 0 45rpx;
	}

	.content-detail {
		width: 100%;
		padding: 0 45rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		text-align: center;
		margin-bottom: 55rpx;
	}

	.button {
		width: 100%;
		margin-bottom: 30rpx;
		padding: 0 10rpx;
	}

	.button_1 {
		width: 523rpx;
		height: 74rpx;
		background: #252331;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FBF8FF;
	}

	.icon {
		position: absolute;
		top: 41rpx;
		right: 5rpx;
		width: 60rpx;
		height: 40rpx;
	}

	.edit-icon {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 160rpx;
		right: 66rpx;
	}
.caiji_box{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 55;
    width: 100%;
    height: 100vh;
     background-color: rgba(255, 255, 255, 1);
}
.sure_caiji{
    position: fixed;
    bottom: 175rpx;
    left:0;
    width: 100%;
    text-align: center;
    font-size: 32rpx;
    z-index: 55;
    font-weight: 600;
}
.cancle_caiji{
    position: fixed;
    bottom: 60rpx;
    left:0;
    width: 100%;
    text-align: center;
    font-size: 32rpx;
    z-index: 55;
    font-weight: 600;
}
.sure_caiji .btn,.cancle_caiji .btn{
    width: 90%;
    margin-left: 5%;
    background-color: #252424;
    color: #fff;
    padding: 24rpx 0rpx;
    text-align: center;
    border-radius: 12rpx;
}

</style>

